<template>
  <m-window-frame
    title="视图配置"
    style="height: 100vh"
    :cancelText="'取 消'"
    :okText="'确 定'"
    :okLoading="diagramCustomizationManagementModel.okLoading"
    class="v-view-cus-pane"
    @cancel="handleCancel"
    @ok="handleOk"
  >
    <div class="view-cus-body g-fd-c g-ov-hidden">
      <div class="view-cus-header g-flex-0">
        <attr-tips type="ViewCustomization"></attr-tips>
      </div>
      <div class="view-cus-content g-flex-1 g-flex g-ov-hidden">
        <div class="view-cus-left g-flex-0">
          <pane-nav
            :tabList="tabList"
            :activeKey="diagramCustomizationManagementModel.activeTab"
            style="height: 100%"
            @changeActiveTab="handleChangeActiveTab"
          ></pane-nav>
        </div>
        <div class="g-flex-1 g-ov-hidden">
          <!-- view-cus-right g-pd-r-16   -->
          <component
            :is="activeTabItem?.comp"
            v-if="activeTabItem?.comp"
            :diagramCustomizationManagementModel="diagramCustomizationManagementModel"
          ></component>
        </div>
      </div>
    </div>
  </m-window-frame>
</template>

<script lang="ts" setup>
import MWindowFrame from "@/common/ipcWindow/WindowFrame.vue";
import { computed, reactive } from "vue";
import AttrTips from "@/common/attrTip/AttrTip.vue";
import PaneNav from "./comps/PaneNav.vue";
import { DiagramCustomizationManagementModel, tabList } from "./DiagramCustomizationManagementModel";
import { AttributeTabKey } from "@/constants/Enums";
// console.error(JSON.parse(query.row));
const params = app.$route.query;

const diagramCustomizationManagementModel = reactive(new DiagramCustomizationManagementModel(params));

const activeTabItem = computed(() => {
  const activeTabKey = diagramCustomizationManagementModel.activeTab;

  const tabItem = tabList.find(item => item.key === activeTabKey);
  return tabItem;
});

const handleChangeActiveTab = (key: AttributeTabKey) => {
  diagramCustomizationManagementModel.changeActiveTab(key);
};

const handleOk = () => {
  diagramCustomizationManagementModel.handleOk();
};
const handleCancel = () => {
  diagramCustomizationManagementModel.handleCancel();
};
</script>
<style lang="scss">
.v-view-cus-pane {
  .view-cus-body {
    height: 100%;

    .view-cus-header {
      border-bottom: 1px solid #e0e0e0;
    }

    .view-cus-right {
      padding-right: 18px;
    }
  }

  .view-cus-right {
    overflow: hidden;
  }
}
</style>
